Integração no Aplicativo

React Native

Para abrir o falazap com todas suas funcionalidades utlizando webview no react-native, são necessários os seguintes passos:

Instalar no projeto a lib react-native-webview.
Inserir as propriedades de acordo com o exemplo abaixo:

Exemplo de WebView

<WebView
  ref={webView}
  source={{ uri: routes.params?.url }}
  allowsInlineMediaPlayback
  originWhitelist={['*']}
  mediaPlaybackRequiresUserAction={false}
  startInLoadingState
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={async (event) => await handleOnMessage(event)}
  javaScriptEnabled
  domStorageEnabled
/>

ref: criar uma variável de referência utilizando o useRef como no exemplo abaixo:

Exemplo de ref

const webView = useRef<WebView>(null);

source: colocar a respectiva uri do bot (falazap) no qual deseja utilizar.

Exemplo de source

source={{ uri: 'https://falazap.fintalk.io/' }}

injectedJavaScript: criar uma variável com o respectivo valor (obrigatóriamente).

Obrigatóriamente dessa maneira injectedJavaScript

const INJECTED_JAVASCRIPT = 'window.supportsAudioRecording = true;';

onMessage: será a função no qual recebe os eventos disparados do falazap, para poder gravar o áudio dentro do app e enviar para o falazap de acordo com o clique no microfone dentro do falazap.

Função do onMessage

const handleOnMessage = async (event: WebViewMessageEvent): Promise<void> => {
    const messageData = JSON.parse(event.nativeEvent.data);
    switch (messageData.type) {
      case 'startRecording':
        try {
          AudioRecord.init({
            sampleRate: 44100,
            channels: 1,
            bitsPerSample: 16,
            audioSource: 6,
            wavFile: 'chat-audio.wav'
          });
          AudioRecord.start();
        } catch (err) {
          if (webView.current) {
            webView.current.injectJavaScript(`
            window.supportsAudioRecording = false;
            true;
          `);
          }
        }
        break;
      case 'stopRecording':
        try {
          const responseAudio = await AudioRecord.stop();
          const audioBase64 = await RNFetchBlob.fs.readFile(responseAudio, 'base64');
          if (webView.current) {
            webView.current.injectJavaScript(`
                window.sendAudio("${audioBase64}");
                true;
              `);
          }
        } catch (err) {
          if (webView.current) {
            webView.current.injectJavaScript(`
            window.supportsAudioRecording = false;
            true;
          `);
          }
        }
        break;
      default:
    }
  };

Para essa função acima funcionar corretamente, será necessário instalar mais duas libs:

react-native-audio-record para gravar o áudio.
rn-fetch-blob para converter o áudio em base64 e enviar para o falazap no ”window.sendAudio”.

React Native​

React Native